---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_textured-sprites.json';
---

<Layout title={title}>
  <canvas id="canvas-container" resize-to="window"></canvas>
</Layout>

<style>
  body {
    height: 100vh;
    overflow-y: hidden;
  }
  body {
    background-color: #391e39;
    background: radial-gradient(circle, rgb(175 82 82) 0%, rgb(90 148 191) 100%);
    color: #eee;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2;
  }
  em {
    font-size: 84.615384%;
    color: #ddd;
  }
</style>

<script>
  import {TexturedSprites, TexturedSpritesGeometry, TexturedSpritesMaterial, TileSetLoader} from '@spearwolf/twopoint5d';
  import {BouncingSprites} from '~demos/textured-sprites/BouncingSprites';
  import {PerspectiveOrbitDemo} from '~demos/utils/PerspectiveOrbitDemo';
  import assetsUrl from '~demos/utils/assetsUrl';

  const demo = new PerspectiveOrbitDemo(document.getElementById('canvas-container'), {antialias: false});

  demo.on('init', async ({scene}) => {
    const CAPACITY = 256;

    const geometry = new TexturedSpritesGeometry(CAPACITY);

    const {tileSet, texture} = await new TileSetLoader().loadAsync(assetsUrl('skinball-256.png'), {
      tileWidth: 256,
      tileHeight: 256,
      margin: 1,
    });

    const bouncingSprites = new BouncingSprites(geometry.instancedPool, tileSet.atlas, 100, 75, 4, CAPACITY);

    bouncingSprites.createSprites();

    demo.on('frame', ({deltaTime}) => {
      bouncingSprites.animate(deltaTime);
    });

    const material = new TexturedSpritesMaterial({colorMap: texture, depthTest: false, depthWrite: false});

    const mesh = new TexturedSprites(geometry, material);

    scene.add(mesh);

    console.log('bouncingSprites', bouncingSprites);
    console.log('TexturedSpritesMesh', mesh);
  });

  demo.start();
</script>
